<template>
  <div>
    <KForm :model="model" :rules="rules" ref="loginForm">
      <KFormItem label="用户名" prop="username">
        <!-- v-model等同于value="model.username"+@input -->
        <KInput v-model="model.username"></KInput>
      </KFormItem>
      <KFormItem label="密码" prop="password">
        <KInput 
          v-model="model.password" 
          type="password" 
          placeholder="请输入密码">
        </KInput>
      </KFormItem>
      <KFormItem>
        <button @click="onLogin">登录</button>
      </KFormItem>
    </KForm>
    {{ model }}
    <h2 class="success" v-if="loginStatus=='success'">登录成功</h2>
    <h2 class="fail" v-else-if="loginStatus=='fail'">登录失败</h2>
    <h2 class="no" v-else>未登录</h2>
  </div>
</template>
<script>
import KInput from "./KInput.vue";
import KFormItem from "./KFormItem.vue";
import KForm from "./KForm.vue";
export default {
  components: {
    KInput,
    KFormItem,
    KForm,
  },
  data() {
    return {
      model: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ 
          required: true, message: "用户名必填" 
        }],
        password: [{ 
          required: true, message: "密码必填" 
        }],
      },
      loginStatus: ''
    };
  },
  methods: {
    onLogin() {
      // 调用KForm组件中validate方法
      this.$refs.loginForm.validate((isValid) => {
        if (isValid) {
          console.log(432)
          this.loginStatus = 'success';
        } else {
          this.loginStatus = 'fail'
        }
      });
    },
  },
};
</script>
<style scoped>
.success {
  color: aquamarine;
}
.fail {
  color: coral;
}
.no {
  color: #ccc;
}
</style>